<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js?v=2.3.4" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<vue-warn :message="message" :forp.sync="fnow"></vue-warn>
			<vue-error :message="message" :forp.sync="fnow"></vue-error>
			<span>本例我们使用component方法来注册自定义一个组件，并支持参数绑定<br/></span>
			<br/>
			<span>{{message}}</span>
			<br/>
			<span>现在值是{{fnow}},自组件使用sync装饰器来进行双向绑定，子组件的forp值修改的话，对应的父组件fnow变量也将修改</span>
		</div>
	</body>
<script type="text/javascript">
var app = new Vue({
	el: '#app',
	data: {
		message: "鬼知道我经历了什么",
		fnow: 110
	},
	components: {
		'vue-warn': {
			props: ['message', 'forp'],
			template: '<div><span class="warn-span">发生错误啦！~{{message}}<br/></span><button v-on:click="clickPlus()">{{ forp }}(点击我+1)</button></div>',
			methods: {
				clickPlus: function(){
					this.$emit('update:forp', this.forp + 1);  //需要显式触发forp更新事件，这样子组件和父组件都将更新该值
					console.log(this.forp);
				}
			}
		},
		'vue-error': {
			props: ['message', 'forp'],
			data: function(){
				return {
					forp2: this.forp  //官方文档不建议直接修改传递过来的props值，应自己建立一个副本来进行操作
				};
			},
			template: '<div><span class="warn-span">发生错误啦！~{{message}}<br/></span><button v-on:click="clickPlus()">{{ forp2 }}(点击我+1)</button></div>',
			methods: {
				clickPlus: function(){
					this.forp2 += 1;  //由于使用了sync修饰符，则父组件对应的fnow变量也将更新。由于forp2在初始化后就作为副本存在，父组件的forp再改变时也不会再影响到forp2的值
					this.$emit('update:forp', this.forp2);  //需要显式触发forp更新事件
					console.log(this.forp);
				}
			}
		}
	}
});

window.setTimeout(function(){
	
}, 300)
</script>
</html>
